<template>
  <right-wrap>
    <div class="right-box">
      <CardBox class="card-box-1" title="本月能源监测">
        <EchartsTpl
          width="100%"
          :height="setFontSize(250) + 'px'"
          :option="option1"
        ></EchartsTpl>
      </CardBox>
      <CardBox class="card-box-2" title="设施管理">
        <EchartsTpl
          width="100%"
          :height="setFontSize(250) + 'px'"
          :option="option2"
        ></EchartsTpl>
      </CardBox>
      <CardBox class="card-box-3" title="智慧停车">
        <div class="card-inner-box">
          <div class="left">
            <img src="@/assets/images/index/car.webp" alt="" />
          </div>
          <div class="right">
            <div class="right-item">
              <div class="content">
                <div class="title">普通停车位</div>
                <div class="msg">
                  <div class="text">总共</div>
                  <div class="num">
                    <count-to
                      :startVal="0"
                      :endVal="info.parking || 0"
                      :duration="3000"
                    ></count-to>
                  </div>
                </div>
              </div>
              <img src="@/assets/images/index/1@2x.webp" alt="" />
            </div>

            <div class="right-item">
              <div class="content">
                <div class="title">电车停车位</div>
                <div class="msg">
                  <div class="text">总共</div>
                  <div class="num">
                    <count-to
                      :startVal="0"
                      :endVal="info.chargingPile || 0"
                      :duration="3000"
                    ></count-to>
                  </div>
                </div>
              </div>
              <img src="@/assets/images/index/1@2x.webp" alt="" />
            </div>
          </div>
        </div>
      </CardBox>
    </div>
  </right-wrap>
</template>

<script lang="ts" setup>
import { watch } from "vue";
import { setFontSize } from "@/utils/px_rem";

import useRightLine from "../../echarts_datas/right_line";
import useRightPie from "../../echarts_datas/right_pie";

const props = defineProps({
  barData: { type: Array, default: () => [] },
  pieData: { type: Array, default: () => [] },
  info: { type: Object, default: () => ({}) },
});

const [option1, setOption1] = useRightLine();
const [option2, setOption2] = useRightPie();

//  柱状图
watch(
  () => props.barData,
  (val, oldVal) => {
    setOption1(val);
  }
);

//  饼图
watch(
  () => props.pieData,
  (val, oldVal) => {
    setOption2(val);
  }
);
</script>

<style lang="scss" scoped>
.right-box {
  margin-top: 0.95rem; // 删除: margin-top: px-scale(95px);
  // width: 5rem; // 删除: width: px-scale(500px);

  .card-box-3 {
    .card-inner-box {
      display: flex;
      padding-top: 0.3rem; // 删除: padding-top: px-scale(30px);

      .left {
        position: relative;
        width: 2.19rem; // 删除: width: px-scale(219px);
        height: 1.48rem; // 删除: height: px-scale(148px);
      }

      .right {
        margin-left: 0.4rem; // 删除: margin-left: px-scale(40px);

        .right-item {
          position: relative;
          top: 0;
          left: 0;
          width: 1.62rem; // 删除: width: px-scale(162px);
          height: 0.6rem; // 删除: height: px-scale(60px);

          &:nth-child(2) {
            margin-top: 0.4rem; // 删除: margin-top: px-scale(40px);
          }

          .content {
            position: absolute;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;

            .title {
              margin-top: 0.04rem; // 删除: margin-top: px-scale(4px);
              margin-left: 0.24rem; // 删除: margin-left: px-scale(24px);
              font-size: 0.18rem; // 删除: font-size: px-scale(18px);
            }

            .msg {
              display: flex;
              align-items: end;
              margin-top: 0.02rem; // 删除: margin-top: px-scale(2px);

              .text {
                margin-left: 0.28rem; // 删除: margin-left: px-scale(28px);
                margin-bottom: 0.02rem; // 删除: margin-bottom: px-scale(2px);
                font-size: 0.13rem; // 删除: font-size: px-scale(13px);
                color: #aaa;
              }

              .num {
                margin-left: 0.2rem; // 删除: margin-left: px-scale(20px);
                font-size: 0.18rem; // 删除: font-size: px-scale(18px);
                font-family: "SJyunhei";
              }
            }
          }
        }
      }
    }
  }
}
</style>